{% extends 'layout/base.twig' %}
{% block content %}
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <div class="span3">
                    <h2>Selection Criteria</h2>
                    <p>This is how values will be selected for graphing</p>
                    <form>
                        <textarea id="selection">{"meta.url" : "/index.php"}</textarea>
                    </form>
                </div><!--/span-->
                <div class="span3">
                    <h2>Values to Retrieve</h2>
                    <p>Values that should be retrieved, and put in the table</p>
                    <form>
                        <textarea id="retrieve">{"meta" : true, "profile.main()" : true}</textarea>
                    </form>
                </div><!--/span-->
                <div class="span3">
                    <h2>Values to Graph</h2>
                    <p>These are things that should end up on the graph.</p>
                    <form>
                        <textarea id="graph">{"meta" : true, "profile.main()" : true}</textarea>
                    </form>
                </div><!--/span-->
                <div class="span3">
                    <h2>Help</h2>
                    <p>Don't Fret, <a href="{{ url('custom.help') }}">there's instructions</a>.</p>

                </div><!--/span-->
            </div><!--/row-->
            <div class="row-fluid">
                <div class="span12">
                    <div class="btn btn-large"
                         style="display: block; margin-left: auto; margin-right: auto; width: 150px;" id="runbutton">Run
                    </div>
                    <div style="display: block; margin-left: auto; margin-right: auto; width: 150px; display: none"
                         id="loading"><img src="{{ static('img/loading.gif') }}"></div>
                </div><!--/span-->
            </div><!--/row-->
            <table class="table table-hover" id="results">
                <thead>
                <tr>
                    <th>Method</th>
                    <th>URL</th>
                    <th>Time</th>
                    <th class="right"><span class="tip" title="Wall time">wt</span></th>
                    <th class="right"><span class="tip" title="CPU time">cpu</span></th>
                    <th class="right"><span class="tip" title="Memory Usage">mu</span></th>
                    <th class="right"><span class="tip" title="Peak Memory Usage">pmu</span></th>
                    <th class="right">IP Address</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div><!--/span-->
    </div><!--/row-->
{% endblock %}
{% block jsfoot %}
    <script type="text/javascript">
        $('#runbutton').click(function () {
            $("#runbutton").hide();
            $("#loading").show();
            var query = $('#selection').val();
            var retrieve = $('#retrieve').val();
            $.ajax({
                url: '{{ url("custom.query") }}',
                type: 'POST',
                data: {'query': query, 'retrieve': retrieve},
                success: function (data) {
                    $('#results tbody').empty();
                    $("#runbutton").show();
                    $("#loading").hide();
                    if (data.hasOwnProperty('error')) {
                        console.log(data.error);
                        if (data.error.hasOwnProperty('query')) {
                            $('#selection').animate(
                                {backgroundColor: '#FFD9D9'},
                                800,
                                function () {
                                    $(this).animate({backgroundColor: '#FFF'});
                                }
                            );
                        }

                        if (data.error.hasOwnProperty('retrieve')) {
                            $('#retrieve').animate(
                                {backgroundColor: '#FFD9D9'},
                                800,
                                function () {
                                    $(this).animate({backgroundColor: '#FFF'});
                                }
                            );
                        }
                    } else {
                        $.each(data, function (i, n) {
                            $("#results tbody").append('<tr><td><a href="/run/view?id=' + i + '"> ' + n.meta.SERVER.REQUEST_METHOD + '</a></td><td><a href="/url/view?url=' + n.meta.url + '">' + n.meta.url + '</a></td><td><a href="/run/view?id=' + i + '">' + n.meta.SERVER.REQUEST_TIME + '</a></td><td class="right">' + n.profile['main()'].wt + '</td><td class="right">' + n.profile['main()'].cpu + '</td><td class="right">' + n.profile['main()'].mu + '</td><td class="right">' + n.profile['main()'].pmu + '</td><td class="right">' + n.meta.SERVER.REMOTE_ADDR + '</td></tr>');
                        });
                    }
                }
            });
        })
    </script>
{% endblock %}
